<template>
    <div class="function">
      <!-- 左侧竖菜单栏 -->
      <el-menu
        default-active="view-report"
        class="side-menu"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="view-report" @click="currentMenuItem = 'view-report'">查看报告</el-menu-item>
        <el-menu-item index="draft-report" @click="currentMenuItem = 'draft-report'">起草报告</el-menu-item>
        <el-menu-item index="view-application" @click="currentMenuItem = 'view-application'">查看申请</el-menu-item>
        <el-menu-item index="submit-application" @click="currentMenuItem = 'submit-application'">提交申请</el-menu-item>
        <router-link to="/plchome">
          <el-menu-item index="back">返回主页</el-menu-item>
        </router-link>
      </el-menu>
  
      <!-- 右侧内容区域 -->
      <div class="main-content">
        <ViewReport v-if="currentMenuItem === 'view-report'" @goToDraftReport = 'goToDraftReport' />
        <DraftReport v-if="currentMenuItem === 'draft-report'" :info = 'draftReportInfo' @clearInfo = 'clearInfo' />
        <ViewApplication v-if="currentMenuItem === 'view-application'" @goToSubmitApplication = 'goToSubmitApplication' />
        <SubmitApplication v-if="currentMenuItem === 'submit-application'" :info = 'SubmitApplicationInfo' @clearInfo = 'clearInfo' />
      </div>
    </div>
  </template>
  
  <script>
  import ViewReport from './components/ViewReport.vue';
  import DraftReport from './components/DraftReport.vue';
  import ViewApplication from './components/ViewApplication.vue';
  import SubmitApplication from './components/SubmitApplication.vue';
  
  export default {
    name: 'ReportAndApplicationPage',
    components: {
      ViewReport,
      DraftReport,
      ViewApplication,
      SubmitApplication,
    },
    data() {
      return {
        currentMenuItem: 'view-report', // 默认显示查看报告组件
        draftReportInfo: null, // 用于存储传递给 DraftReport 的 rid
        SubmitApplicationInfo: null, // 用于存储传递给 SubmitApplication 的 aid
      }
    },
    methods: {
      setCurrentMenuItem(menuItem) {
        this.currentMenuItem = menuItem
      },
      goToDraftReport(info) {
        // 在这里接收从 ViewReport 组件传递过来的rid，并更新 draftReportInfo
        this.draftReportInfo = info;
        console.log('parent.report:' + this.draftReportInfo)
        this.currentMenuItem = 'draft-report' // 切换到起草报告组件
      },
      goToSubmitApplication(info) {
        // 在这里接收从 ViewApplication 组件传递过来的aid，并更新 draftReportInfo
        this.SubmitApplicationInfo = info;
        console.log('parent.application:' + this.SubmitApplicationInfo)
        this.currentMenuItem = 'submit-application' // 切换到提交申请组件
      },
      clearInfo() {
        this.draftReportInfo = ''
        this.SubmitApplicationInfo = ''
        console.log('info cleared')
      }
    },
  };
  </script>
  
  <style scoped>

.side-menu {
  position: fixed; /* 固定定位 */
  left: 0; /* 距离左侧0 */
  top: 0; /* 距离顶部0 */
  height: 100vh; /* 高度占整个视口高度 */
  width: 20vw; /* 菜单栏的宽度 */
  background-color: #545c64; /* 菜单栏的背景颜色 */
  color: #fff; /* 文字颜色 */
  border-right: 1px solid #333; /* 菜单栏的边框 */
}

.main-content {
  position: fixed;
  right:0;
  top:0;
  width: 80vw;
  height: 100%; /* 主内容区域高度占整个视口高度 */
  background-color: #fff;
}
  </style>
  